<script setup>
import { reactive,ref } from 'vue'
import { useRouter } from 'vue-router';

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'

const router = useRouter();

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  getBegin();
pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  getBegin();
pageNum.value = num
}//分页模型结束




//数据模型
const projectInfo=ref({
    name:'',
    projectId:'',
    tutorName:'',
    masterName:'',
    masterId:'',
    category:'',
    msg:''
})


//输入框
import { Search } from '@element-plus/icons-vue'
import {getBeginService,getErrorDetailService} from "@/api/Item.js"
const nameSearch = ref('')

//定义返回列表数据
const beginPage = ref([])



//获取立项审核列表
const getBegin=async()=>{
    let params={
        page:pageNum.value,
        pageSize:pageSize.value,
        name:nameSearch.value?nameSearch.value:''
    }
    let result=await getBeginService(params)
    beginPage.value=result.data.records
    total.value=result.data.total
}
getBegin();

//项目类别展示
const formatCategory=(row)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[row.category]
}
//失败详情显示项目类型
const textCategory=(category)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[category]
}

//事件
const currentRow=ref({
    name:'',
    projectId:'',
    tutorName:'',
    masterName:'',
    masterId:'',
    category:'',
    msg:''
})
const handleSubmit=(row)=> {
      // 处理“提交文件”点击事件
      alert("提交文件")
      console.log("提交文件", row);
    }
 const handleDelay=(row)=> {
      // 处理“延期”点击事件
      alert("延期")
      console.log("延期", row);
    }
//项目详情
const handleDetail=async(row)=> {
  let type=0
   dialogFormVisible.value = true
    let result= await getErrorDetailService(type,row.id)
    console.log(result.data)
    projectInfo.value=result.data
    console.log(projectInfo.log)
    }


//根据项目名查询
const onSearchClick=async()=>{
  let params={
        page:pageNum.value,
        pageSize:pageSize.value,
        name:nameSearch.value?nameSearch.value:''
    }
    let result=await getBeginService(params)
    beginPage.value=result.data.records
    total.value=result.data.total
}


//点击每行跳转到项目详情
const handleRowClick=async(row)=>{
    console.log(row.id)
    router.push({ path: '/item/details',query: { id: row.id } });
} 
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>立项列表</span>
            </div>
        </template>
        <el-input
              v-model="nameSearch"
              style="width: 30%; margin: 10px;"
              class="w-50 m-2"
              size="large"
              placeholder="请输入项目名" 
            />
            <el-button type="primary" :icon="Search"  @click="onSearchClick"></el-button>
        <el-table :data="beginPage" style="width: 100%" @row-click="handleRowClick">
            <el-table-column label="项目名称" prop="name"></el-table-column>
            <el-table-column label="项目编号" prop="id" :show-overflow-tooltip="true"
               :header-cell-class-name="'no-wrap'" min-width="150"></el-table-column>
            <el-table-column label="指导老师" prop="teacher"></el-table-column>
            <el-table-column label="负责人" prop="tutor"></el-table-column>
            <el-table-column label="院系" prop="department"></el-table-column>
            <el-table-column label="项目类型" prop="category" :formatter="formatCategory"></el-table-column>
            <el-table-column label="申报时间" prop="declareTime"></el-table-column>
            <el-table-column label="项目状态" prop="status">
                    <template v-slot="scope">
                      <span :class="{ 'red-color': scope.row.status === '立项审核未通过', 'blue-color': scope.row.status === '立项审核中', 'green-color': scope.row.status === '立项审核通过' }">
                        {{ scope.row.status }}
                      </span>
                    </template>
            </el-table-column>
            <el-table-column label="操作">
                  <template v-slot="{row}">
                    <span v-if="row.flag === 1">
                      <el-button type="text" @click.stop="handleSubmit(row)">提交文件</el-button>
                    </span>
                    <span v-else-if="row.flag === 2">
                      <el-button type="text" @click.stop="handleDetail(row)">详情</el-button>
                      <el-dialog v-model="dialogFormVisible" title="未通过详情" >
                        <el-form :model="projectInfo" label-position="left">
                            <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="项目名称" label-width="80px">
                                          <el-text class="mx-1">{{ projectInfo.name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="项目编号" label-width="80px">
                                          <el-text class="mx-1">{{ projectInfo.projectId }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="项目类型" label-width="80px">
                                          <el-text class="mx-1">{{ textCategory(projectInfo.category) }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>

                                    <!-- 第二行 -->
                                    <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="负责人" label-width="80px">
                                          <el-text class="mx-1">{{ projectInfo.masterName }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="学号" label-width="80px">
                                          <el-text class="mx-1">{{ projectInfo.masterId }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="老师" label-width="80px">
                                          <el-text class="mx-1">{{ projectInfo.tutorName }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>
                                <el-row >
                                  <el-col :span="24">
                                    <el-form-item label="失败详情:" :label-width="formLabelWidth">
                                      <el-text class="mx-1">{{ projectInfo.msg }}</el-text>
                                    </el-form-item>
                                  </el-col>
                                </el-row>
                        </el-form>
                        <template #footer>
                          <span class="dialog-footer">
                            <el-button @click.stop="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click.stop="dialogFormVisible = false">
                              确定
                            </el-button>
                          </span>
                        </template>
                      </el-dialog>
                    </span>
                    
                  </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>   
        
         <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
        layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
        @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
   
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: large;
    }
}
//不换行
.no-wrap {
  white-space: nowrap;
}
//对话框
.el-button--text {
  margin-right: 5px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
//审核字体颜色
.red-color {
  color: red;
}

.blue-color {
  color: blue;
}

.green-color {
  color: green;
}
</style>